<h1>Counter module:</h1>
<div>Current Count: {{ (count$ | async)?.count }}</div>
<button (click)="increment()" nz-button>Increment +10</button>
<button (click)="decrement()" nz-button>Decrement -10</button>
<button (click)="reset()" nz-button>Reset Counter</button>
<h1>Store Get Request :</h1>
<button (click)="send()" nz-button>Get List</button>
<div nz-row>
  <div nz-col nzSpan="6">
    <h3>使用Async管道</h3>
    <div *ngFor="let item of list$ | async">
      <span>{{item}}</span>
    </div>
  </div>
  <div nz-col nzSpan="6">
    <h3>使用NgRxLet</h3>
    <div *ngrxLet="list$ as m; error as e; complete as c; suspenseTpl loading">
      {{m}}
      <p *ngIf="e">There is an error: {{ e }}</p>
      <p *ngIf="c">Observable is completed.</p>
    </div>
  </div>
  <div nz-col nzSpan="6">
    <ng-template #loading>Loading...</ng-template>
    <h3>简洁版NgRxLet</h3>
    <ng-container *ngrxLet="list$ as n; suspenseTpl: loading">
      {{n}}
    </ng-container>
    <ng-template #loading>
      <p>Loading...</p>
    </ng-template>
  </div>
  <div nz-col nzSpan="6">
    <h3>使用NgRxPush</h3>
    {{list$ | ngrxPush}}
  </div>
</div>





